<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="../../shared/nearby_share_settings.html">
<link rel="import" href="../../shared/nearby_share_settings_behavior.html">

<dom-module id="nearby-share-device-name-dialog">
  <template>
    <style>
      :host {
        --cr-dialog-width: 340px;
      }

      h1 {
        color: var(--cr-primary-text-color);
        font-family: 'Google Sans';
        font-size: 16px;
        font-weight: normal;
        line-height: 24px;
        margin: 0;
        padding-block-end: 24px;
        padding-block-start: 24px;
      }
    </style>

    <cr-dialog id="dialog">
      <h1 slot="title">
        $i18n{nearbyShareDeviceNameDialogTitle}
      </h1>
      <div slot="body">
        <cr-input value="[[settings.deviceName]]"
            on-input="onDeviceNameInput_"
            error-message="[[errorMessage]]"
            invalid="[[hasErrorMessage_(errorMessage)]]" autofocus>
        </cr-input>
      </div>
      <div class="layout horizontal center" slot="button-container">
        <cr-button class="cancel-button" on-click="onCancelClick_">
          $i18n{cancel}
        </cr-button>
        <cr-button id="doneButton"
            class="action-button"
            on-click="onSaveClick_"
            disabled="[[hasErrorMessage_(errorMessage)]]">
          $i18n{nearbyShareConfirmDeviceName}
        </cr-button>
      </div>
    </cr-dialog>
  </template>
  <script src="nearby_share_device_name_dialog.js"></script>
</dom-module>
